class lunBoth {
    constructor() {
        this.getDjinn();
        this.liBanging()
        this.youAnnie()
        this.zuoAnnie()
        this.ziDonged()
        this.zanTing()
        this.jiAuks()
    };

    getDjinn() {
        this.ul = document.querySelectorAll('#lbt li')
        this.ol = document.querySelectorAll('ol li');
        this.goPrev = document.getElementById('goPrev');
        this.goNext = document.getElementById('goNext');
        // console.log(this.goPrev, this.goNext);
    }
    //进入隐藏图片的索引
    lastIndex = 0;
    //显示要出来的图片索引
    index = 0;
    liBanging() {
        //给ol 所有的li绑定事件
        this.ol.forEach((li, key) => {
            li.onclick = () => {
                //让隐藏和显示出来的索引相等
                this.lastIndex = this.index;
                //要出来的索引和实际索引相等
                this.index = key
                // console.log(this);
                this.change() //调用change 使图片动起来
            }
        })
    }
    change() {
        //console.log(this.ul);
        //lastIndex属性，这个属性用于规定下次匹配的起始位置。
        this.ul[this.lastIndex].className = '';
        this.ol[this.lastIndex].className = '';
        //设置当前操作的图片显示出来 绑定ol和li的类名
        this.ul[this.index].className = 'ac';
        this.ol[this.index].className = 'ac'

    };
    youAnnie() {

        this.goNext.onclick = () => {
            // console.log(this);
            this.lastIndex = this.index;
            this.index++;
            if (this.index > this.ul.length - 1) {
                this.index = 0
            }
            this.change()
        }

    }

    zuoAnnie() {
        this.goPrev.onclick = () => {
            this.lastIndex = this.index;
            this.index--;
            if (this.index < 0) {
                this.index = this.ul.length - 1;
            }
            this.change()
        };
    };

    times = '';
    ziDonged() {
        this.times = setInterval(() => {
            this.goNext.onclick();
        }, 1500)
    }

    zanTing() {
        this.goNext.parentNode.onmouseover = () => {
            clearInterval(this.times)
        };
    };

    jiAuks() {
        this.goNext.parentNode.onmouseout = () => {
            this.ziDonged();
        }
    }


};
new lunBoth();



